<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<html>
<head>
<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.js"></script>
<script src="/three/lib/validator/bootstrapValidator.min.js"></script>
<script src="/three/lib/validator/zh_CN.js"></script>
<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/three/static/formEdit.js"></script>
<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type ="text/javascript" src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>礼券管理</title>
</head>
<script type="text/javascript">
   $(function(){
	   $('.table-sort').dataTable({
			"aaSorting": [[ 1, "desc" ]],//默认第几个排序
			"bStateSave": true,//状态保存
			"pading":false,
			"aoColumnDefs": [
			  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
			  {"orderable":false,"aTargets":[0,8]}// 不参与排序的列
			]
		});
	   $(".tr1").on("click",function(){		  
		   if($(this).children().children().prop("checked")==true){
			   $(this).children().children().prop("checked",false);
		   }else{
			   $(this).children().children().prop("checked",true);
		   }	
	    })
       $("#activeName").on("blur",function(){
    	    if($("#activeName").val()==""){
    	    	$("#error").html("<font color='red'>对不起,活动名称不能为空</font>");
    	    	$("#addBut").removeAttr('onclick');
    	    }else{
    	    	$("#error").html("");
    	    	$("#addBut").attr("onclick","dataSava()");
    	    }
       })
       $("#resetBut").on("click",function(){
    	   $("#mohuKey").val("");
    	   $("#mohuPhoto").val("");
    	   $("#mohuState").val("");
       })
   })
   function dataDel(){
	    var activeId=""; 
	    var check=$("input:checked");
	    for(var i=0;i<check.length;i++){
	    		activeId+=check[i].value+",";
	    }
	  if(activeId.length==0){
		   layer.open({
			   skin: 'demo-class',
			   title: '温馨提示',
			   content: '请选择您要删除的颜值信息！'
			 });    
	   }else{
		   console.log("即将要删除的id:"+activeId);
		   layer.confirm('您确定要删除所选择的颜值信息吗?', function(index) {
				window.location.href="/three/active/DelActive?activeId="+activeId+"";
				layer.msg('删除成功!', {
					icon : 1,
					time : 1000
				});
			});
	   }
   }
   function dataQuery(){
	   var activeId=""; 
	    var check=$("input:checked");
	    for(var i=0;i<check.length;i++){
	    		activeId+=check[i].value+",";
	    }
	   if(activeId.length==0){
		   layer.open({
			   skin: 'demo-class',
			   title: '温馨提示',
			   content: '请选择您要查看的礼券兑换信息！'
			 }); 
	   }else if(activeId.substring(0, activeId.length-1).indexOf(",")>-1){
		   layer.open({
			   skin: 'demo-class',
			   title: '温馨提示',
			   content: '对不起,一次只能查看一个礼券兑换信息！'
			 }); 
	   }else{
		   $("#tb").empty();
		   activeId=activeId.substring(0, activeId.length-1);
		   var key=$("#mohuKey").val();  
		   var photo=$("#mohuPhoto").val(); 
		   var state=$("#mohuState").val();
           $.ajax({
			   type: "POST",
			   url: "/three/active/queryById",
			   data: {"activeId":activeId,"key":key,"photo":photo,"state":state},
			   dataType: 'json',
			   success: function(msg){
				  $.each(msg, function(index,obj){   
					  var text="未知";  var exch="未知";
					  if(obj.createTime!=null){
						  var DateValue=new Date(obj.createTime);
						  text = DateValue.getFullYear()+"-"+parseInt(DateValue.getMonth()+1)+"-"+DateValue.getDate()+" "+DateValue.getHours()+":"+DateValue.getMinutes()+":"+DateValue.getSeconds();
					  }
					  if(obj.exchangeTime!=null){
						  var ExchValue=new Date(obj.exchangeTime);
						  exch = ExchValue.getFullYear()+"-"+parseInt(ExchValue.getMonth()+1)+"-"+ExchValue.getDate()+" "+ExchValue.getHours()+":"+ExchValue.getMinutes()+":"+ExchValue.getSeconds();
					  }
					  if(obj.mobile==null){
						  obj.mobile="未知";
					  }
					  if(obj.status=="1"){
						  obj.status="未兑换";
					  }else if(obj.status=="2"){
						  obj.status="已兑换";
					  }else{
						  obj.status="已失效";
					  }
					  $("#tb").append("<tr><td>"+obj.cdkey+"</td><td>"+obj.mobile+"</td><td>"+obj.status+"</td><td>"+exch+"</td><td>"+text+"</td></tr>");
				 });
			   }
			});
		   $("#myModal02").modal('show');
	   }
   }
   function MOHUQuery(){
	  dataQuery();
   }
   function savaActive(){
	   $("#activeName").val("");
	   $("#beautyNum").val("1");
	   $("#bondNum").val("1");
	   $("#error").html("");
	   $("#myModal").modal('show');
   }
   function dataSava(){
	   if($("#activeName").val()==""){
	    	$("#error").html("<font color='red'>对不起,活动名称不能为空</font>");
	    	$("#addBut").removeAttr('onclick');
	    }else{
	    	$("#form1").attr("action","/three/active/SavaActive");
	        $("#form1").submit();
	    }
   }
</script>
<body  style="margin:5px">
<!-- add Modal state -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="background-color: red;">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"><b><font color="blue">新增活动礼券信息</font></b></h4>
      </div>
      <div class="modal-body">
      <form action="" method="post" id="form1">
         <table class="table table-striped" style="width: 560px;border-color: red;height: 180px;" border="1">
        <tbody>
        <tr>
            <td width="100px"><b>活动名称:</b></td>
            <td><input type="text" name="activeName" id="activeName" placeholder="请输入活动名称" style="width:250px" class="input-text radius">
                 <div id="error"></div>
            </td>
          </tr>
          <tr>
            <td width="100px"><b>美研券数量:</b></td>
            <td id="t1"><input type="number" oninput="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" name="beautyNum" id="beautyNum" min="1"  placeholder="请输入美研券数量" style="width:250px" class="input-text radius"><b>张券</b></td>
          </tr>
          <tr>
            <td width="130px"><b>每张券可兑换颜值数量:</b></td>
            <td id="t2">
            <input type="number" name="bondNum" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" id="bondNum" min="1" placeholder="请输入可兑换颜值数量" style="width:250px" class="input-text radius"><b>个币</b>
            </td>
          </tr>
        </tbody>
         </table>
      </form>
      </div>
      <div class="modal-footer">
        <div align="center">   
            <a onclick="dataSava()" class="btn btn-success radius" id="addBut"><i class="Hui-iconfont">&#xe615;</i> 生成美研券</a>
            <a class="btn btn-danger radius" data-dismiss="modal"><i class="Hui-iconfont">&#xe706;</i> 取消</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!--add Modal end -->
<!--Query Modal02 state -->
<div class="modal fade bs-example-modal-lg" id="myModal02" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width: 750px;">
    <div class="modal-content">
      <div class="modal-header" style="background-color: red;">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"><b><font color="blue">查看礼券兑换信息</font></b></h4>
      </div>
      <div class="modal-body" align="center">
       <table style="text-align: center;">
            <tr>
			     <td><b>兑换码:</b></td>
			      <td><input type="text" class="input-text radius" id="mohuKey" style="width:120px"></td>
			       <td><b>兑换手机:</b></td>
			      <td><input type="text" class="input-text radius" id="mohuPhoto" style="width:120px"></td>
			       <td><b>状态:</b></td>
			      <td><span class="select-box inline">
					<select class="select" id="mohuState" style="width:120px">
						<option value="">请选择</option>
			            <option value="2">已兑换</option>
			            <option value="1">未兑换</option>
			            <option value="3">已失效</option>
					</select>
					</span>
					   <input type="hidden" id="hid">
					</td>
					<td><button type="button" class="btn btn-success" onclick="MOHUQuery()"><i class="Hui-iconfont">&#xe665; 查询</i> </button>
			 &nbsp;&nbsp;
			 <button type="button" class="btn btn-success" id="resetBut" name=""><i class="Hui-iconfont">&#xe66b; 重置</i> </button>
			  </td>
       </tr>
       </table>
       <div style="height: 20px"></div>
      <div id="selectTree" class="ztree" style="height:380px;overflow:auto;">
      <form action="" method="post" id="form2">
          <table class="table table-border table-bordered table-hover table-bg" style="width: 600px;">
			<thead>
				<tr class="text-c">
				    <th>兑换码</th>
					<th>兑换手机</th>
					<th>状态</th> 
					<th>兑换时间</th>
					<th>创建时间</th>
				</tr>
			</thead>
			<tbody id="tb">
			</tbody>
		</table>
      </form>
     </div>
      </div>
      <div class="modal-footer">
        <div>   
            <a class="btn btn-danger radius" data-dismiss="modal"><i class="Hui-iconfont">&#xe706;</i> 关闭</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="page-container">
	<div class="text-c">
  <form action="/three/active/queryActive" method="post" id="form1">
  <table style="width: 600px;" align="center">
    <tr>
     <td><b>活动名称:</b></td>
      <td><input type="text" class="input-text" name="activeName" id="acName" style="width:150px"></td>
       <td><b>删除标志:</b></td>
      <td><span class="select-box inline">
		<select class="select" name="isDel" id="del" style="width:120px">
			<option value="">请选择</option>
            <option value="0">有效</option>
            <option value="1">已删除</option>
		</select>
		</span>&nbsp;&nbsp;
		</td>
		<td><button type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont">&#xe665; 查询</i> </button>
 &nbsp;&nbsp;
 <button type="reset" class="btn btn-success" id="resetBut" name=""><i class="Hui-iconfont">&#xe66b; 重置 </i></button>
  </td>
    </tr>
  </table>
  </form>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
		<a class="btn btn-primary radius" onclick="savaActive()"><i class="Hui-iconfont">&#xe600;</i> 添加</a>
		<a href="javascript:;" onclick="dataDel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 删除</a>
		<a href="javascript:;" onclick="dataQuery()" class="btn btn-secondary radius"><i class="Hui-iconfont">&#xe683;</i> 查看礼券兑换码</a>
    	</span>
		<span class="r">共有数据：<strong>${activeList.size()}</strong>条</span>
	</div>
	<div class="mt-20">
		<table class="table table-border table-bordered table-hover table-bg table-sort">
			<thead>
				<tr class="text-c">
				    <th width="80">选择</th>
				    <th width="80">活动编号</th>
					<th width="80">活动名称</th>
					<th width="80">颜值券数量</th> 
					<th>每张券可兑换颜值数量</th>
					<th>已兑换数量</th>
					<th>剩余数量</th>
					<th>删除标志</th>
					<th>创建时间</th>
				</tr>
			</thead>
			<tbody id="tb02">
			   <c:forEach items="${activeList }" var="active">
				<tr class="tr1">
				    <td style="text-align: center;"><input type="checkbox" value="${active.active_id }"/></td>
					<td style="text-align: center;">${active.active_id }</td>
					<td style="text-align: center;">${active.active_name }</td>
					<td style="text-align: center;">${active.beauty_num }</td>
					<td style="text-align: center;">${active.bond_num }</td>
					<td style="text-align: center;">${active.ydh }</td>
					<td style="text-align: center;">
					<c:if test="${active.is_del=='0'}">${active.ysl }</c:if>
					 <c:if test="${active.is_del=='1'}">0</c:if>
					</td>
					<td style="text-align: center;">
					  <c:if test="${active.is_del=='0'}">有效</c:if>
					  <c:if test="${active.is_del=='1'}"><font color="red">已删除</font></c:if>
					</td>
					<td style="text-align: center;"><f:formatDate value="${active.create_time }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>